<template>
    <div style="margin:10px 0; height:100%; padding:0 10px;">
        <van-col span="24"  v-for="card in dicountCradList" :key="card.index">
            <discount-card 
            :cardValue="card.cardValue"
            :vardValueDesc="card.vardValueDesc"
            :unitDesc="card.unitDesc"
            :condition="card.condition"
            :name="card.name"
            :description="card.description"
            :startAt="card.startAt"
            :endAt="card.endAt"
            :showBtn="false"
            ></discount-card>
        </van-col>
        <div class="btnDiscountCard">立即领取</div>
    </div>    
</template>

<script>
import discountCard from './../../components/discountCard';
export default{
    name: 'getDiscountCard',
    data() {
        return {
            name: 'getDiscountCard',
            dicountCradList:[
                {
                    cardValue: 5000, // 优惠券值，以分为单位
                    vardValueDesc: 50, // 实际显示值
                    unitDesc: '元', // 优惠券单位
                    condition: '无限制条件', // 使用条件
                    name: '新年优惠券', // 优惠券名称
                    description: '优惠券使用描述信息', // 优惠券使用描述信息
                    startAt: '2020-01-01', // 可用开始时间
                    endAt: '2020-12-12', // 可用结束时间
                }
            ]
        }
    },
    components: { discountCard }
}
</script>

<style lang="scss" scoped>
    .cardList{
        background: #ff5400;
        color: #fff;
        padding: 10px;
        border-radius: 6px;
    }
    .btnDiscountCard{
        margin: 10px auto;
        text-align: center;
        font-size: 16px;
        border-radius: 6px;
        background: #ff5400;
        color: #fff;
        line-height: 1;
        padding: 15px 0;
        clear: both;
        width: 100%;
        display: inline-block;
    }
</style>